<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飞线图</title>
  <script type="text/javascript"
          src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=KzmFqkWUs9MbKNwQqLUeCWF8giEWZnox"></script>
  <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
  <script src="https://mapv.baidu.com/build/mapv.js"></script>
  <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
  <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.124/dist/mapvgl.threelayers.min.js"></script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #map_container {
      width: 100%;
      height: 100%;
      margin: 0;
    }
  </style>
</head>
<body>

<div id="map_container"></div>
<script>
  let map = initMap({
    tilt: 60,
    heading: 0,
    center: [114.92, 27.81],
    zoom: 6,
    style: purpleStyle,
  })
  function  initData(){
    let data = [];
    var citys = [
      '北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
      '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
      '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
    ];
    var randomCount = 100; // 模拟的飞线的数量
    //生产贝塞尔曲线坐标集
    var curve = new mapvgl.BezierCurve();
    // 构造数据
    while (randomCount--) {
      var startPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);
      var endPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)])
      curve.setOptions({
        start: [startPoint.lng, startPoint.lat],
        end: [endPoint.lng, endPoint.lat]
      });
      var curveModelData = curve.getPoints();
      data.push({
        geometry: {
          type: 'LineString',
          coordinates: curveModelData
        },
        properties: {
          count: Math.random()
        }
      });
    }
    return data
  }

  function setData(data) {
    // 1.生成mapvgl 视图view
    let view = new mapvgl.View({
      map: map
    });

    // 2.初始化mapvgl的 FlyLineLayer
    let flylineLayer = new mapvgl.FlyLineLayer({
      style: 'chaos',
      step: 0.3,
      color: 'rgba(33, 242, 214, 0.3)',
      textureColor: function (data) {
        return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd';
      },
      textureWidth: 20,
      textureLength: 10
    });

    //3. 将pointLayer对象添加至view中
    view.addLayer(flylineLayer);
    //4.将data与pointLayer绑定
    flylineLayer.setData(data);
  }

  setData(initData())
</script>
</body>
</html>